<template>
  <div class="society">
      <header>
        <form action="/" class="search">
          <van-search placeholder="请输入商品关键词" v-model="searchValue" shape="round" class="search" @keypress="searchKeyWord"/>
        </form>
        <div class="scan" @click="toRelease">
          <van-icon name="photograph" size=".44rem"/>
          <span>发布</span>
        </div>
      </header>
      <notice></notice>
      <div class="contant_box">
        <div class="more_type" :class="fixedMore ? 'fixed' : ''" @click="toClassification"><van-icon name="wap-nav" size=".54rem"/></div>
        <van-tabs class="contant" v-model="active" swipeable :animated="true" :sticky="true" :offset-top="$remToPx(0.48)" @scroll="onScroll" @change="doChange">
          <van-tab v-for="(item, index) in classifiyArr" :title="item.name" :key="index">
            <Hot v-if="(index === 1 || index >= 3)" :index="index" :classId="item.id"></Hot>
            <Recommend v-if="index === 0 || index === 2" :index="index"></Recommend>
          </van-tab>
        </van-tabs>
      </div>
  </div>
</template>

<script>
import Hot from './components/hot'
import Recommend from './components/recommend'
export default {
  components: {
    Hot,
    Recommend
  },
  data () {
    return {
      fixedMore: false,
      searchValue: '',
      active: 0,
      classifiyArr: [],
      contantData: new Array(3)
    }
  },
  methods: {
    onScroll (obj) {
      if (obj.isFixed) {
        this.fixedMore = true
      } else {
        this.fixedMore = false
      }
    },
    toClassification () {
      this.$router.push('/classification')
    },
    getClassifyList () {
      this.$axios.get('/api/classify/list').then(res => {
        this.classifiyArr = res.data.userFocus
        this.contantData = new Array(this.classifiyArr.length)
      })
    },
    toRelease () {
      this.$router.push('/societyrelease')
    },
    doChange (name) {
      this.$store.commit('SET_SOCIETY_INDEX', name)
    },
    searchKeyWord (event) {
      if (event.keyCode === 13) {
        event.preventDefault()
        this.$router.push({ name: 'allgoods', params: { key: this.searchValue } })
      }
    }
  },
  created () {
    this.getClassifyList()
    this.active = this.$store.state.societyIndex
  }
}
</script>

<style lang="scss">
.society{
  background: #ffffff;
  // height: calc(100% - .95rem);
  height: 100%;
  header{
    padding: .14rem .3rem;
    font-size: .24rem;
    color: #666666;
    background: #E0261B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan{
      display: flex;
      font-size: .18rem;
      color: #ffffff;
      flex-direction: column;
      align-items: center;
    }
    .search{
      width: 6.28rem;
      height: .6rem;
      padding: 0;
      background: #E0261B !important;
      &>*{
        // background: #ffffff;
        width: 100%;
        border-radius: .36rem;
        height: .6rem;
      }
    }
    .van-cell__value--alone{
      display: flex;
    }
  }
  .contant_box{
    height: calc(100% - .88rem - .48rem);
    position: relative;
    // border-bottom: .02rem solid #e4e4e4;
    .contant{
      height: 100%;
    }
    .more_type{
      position: absolute;
      width: .78rem;
      right: 0;
      height: 44px;
      color: #707070;
      background: #ffffff;
      font-size: .36rem;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .fixed{
      position: fixed;
      top: .48rem;
      right: 0;
    }
    .van-tab{
      font-size: .32rem;
      flex-basis: 25% !important;
    }
    .van-tabs--line .van-tabs__wrap{
      margin-right: .78rem;
    }
    .van-tab--active{
      color: #FF2A1F;
    }
    .van-tabs__line{
      background: #FF2A1F;
    }
    .van-tabs__content{
      height: calc(100% - .88rem);
    }
    .van-tab__pane-wrapper{
      overflow: auto;
    }
  }
}
</style>
